<div class="wsl-list-item md:space-x-4">
  <div class="wsl-item-heading">
    <div
      class="wsl-item-status"
      [tippy]="meta.icon.tooltip"
      placement="left"
      [delay]="[500, 100]">
      <fa-icon
        [icon]="meta.icon.type"
        [ngStyle]="{ color: meta.icon.color }"></fa-icon>
    </div>
    <div class="wsl-item-title">
      <p [title]="result.name">
        {{ result.name }}
      </p>
    </div>
  </div>
  <div>
    <div
      class="wsl-item-topics"
      *ngIf="meta.rowType === rowType.Common_Perfect_Simple">
      <div class="wsl-item-topic">
        <span class="font-medium">{{ result.srcValue }}</span>
      </div>
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-simple">{{ result.srcType }}</span>
      </div>
    </div>
    <div
      class="wsl-item-topics"
      *ngIf="
        [
          rowType.Common_Accepted_Complex,
          rowType.Common_Perfect_Complex,
          rowType.Common_Perfect_Image,
          rowType.Common_Perfect_Video,
          rowType.Common_Imperfect_Image,
          rowType.Common_Imperfect_Video,
          rowType.Fresh_Complex,
          rowType.Fresh_Image,
          rowType.Fresh_Video
        ].includes(meta.rowType)
      ">
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-complex" (click)="toggleComplexView()">
          <span>{{ result.srcType }}</span>
          <ng-icon
            [name]="
              hideComplexValue ? 'featherChevronRight' : 'featherChevronDown'
            " />
        </span>
      </div>
    </div>
    <div
      class="wsl-item-topics"
      *ngIf="
        [
          rowType.Missing_Complex,
          rowType.Missing_Image,
          rowType.Missing_Video
        ].includes(meta.rowType)
      ">
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-complex" (click)="toggleComplexView()">
          <span>{{ result.dstType }}</span>
          <ng-icon
            [name]="
              hideComplexValue ? 'featherChevronRight' : 'featherChevronDown'
            " />
        </span>
      </div>
    </div>
    <div
      class="wsl-item-topics"
      *ngIf="meta.rowType === rowType.Common_Imperfect_Simple">
      <div class="wsl-item-topic">
        <span>
          value in version {{ params.srcBatchName }}:
          <b>{{ result.srcValue }}</b>
        </span>
      </div>
      <div class="wsl-item-topic">
        <span>
          value in version {{ params.dstBatchName }}:
          <b>{{ result.dstValue }}</b>
        </span>
      </div>
      <div class="wsl-item-topic">
        <span>{{ result.score | percent : '1.0-0' }}</span>
      </div>
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-simple">{{ result.srcType }}</span>
      </div>
    </div>
    <div
      class="wsl-item-topics"
      *ngIf="meta.rowType === rowType.Common_Imperfect_Complex">
      <div
        class="wsl-item-topic items-center justify-center"
        [ngClass]="hideComplexValue ? 'hidden' : 'flex'">
        <div class="wsl-btn-sm flex items-center space-x-2">
          <span class="text-xs">Inline Diff</span>
          <app-checkbox [value]="inlineDiff" (toggle)="toggleInlineDiff()" />
        </div>
      </div>
      <div class="wsl-item-topic flex justify-center">
        <span>{{ result.score | percent : '1.0-0' }}</span>
      </div>
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-complex" (click)="toggleComplexView()">
          <span>{{ result.srcType }}</span>
          <ng-icon
            [name]="
              hideComplexValue ? 'featherChevronRight' : 'featherChevronDown'
            " />
        </span>
      </div>
    </div>
    <div
      class="wsl-item-topics"
      *ngIf="meta.rowType === rowType.Common_Different_Simple">
      <div class="wsl-item-topic">
        <span>
          value in version {{ params.srcBatchName }}:
          <b>{{ result.srcValue }}</b>
          ({{ result.srcType }})
        </span>
      </div>
      <div class="wsl-item-topic">
        <span>
          value in version {{ params.dstBatchName }}:
          <b>{{ result.dstValue }}</b>
          ({{ result.dstType }})
        </span>
      </div>
    </div>
    <div
      class="wsl-item-topics"
      *ngIf="meta.rowType === rowType.Common_Different_Complex">
      <div class="wsl-item-topic">
        <span>
          value in version {{ params.srcBatchName }}: ({{ result.srcType }})
        </span>
      </div>
      <div class="wsl-item-topic">
        <span>
          value in version {{ params.dstBatchName }}: ({{ result.dstType }})
        </span>
      </div>
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-complex" (click)="toggleComplexView()">
          <span>Show Values</span>
          <ng-icon
            [name]="
              hideComplexValue ? 'featherChevronRight' : 'featherChevronDown'
            " />
        </span>
      </div>
    </div>
    <div
      class="wsl-item-topics"
      *ngIf="meta.rowType === rowType.Missing_Simple">
      <div class="wsl-item-topic">
        <span class="font-medium">{{ result.dstValue }}</span>
      </div>
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-simple">{{ result.dstType }}</span>
      </div>
    </div>
    <div class="wsl-item-topics" *ngIf="meta.rowType === rowType.Fresh_Simple">
      <div class="wsl-item-topic">
        <span class="font-medium">{{ result.srcValue }}</span>
      </div>
      <div class="wsl-item-topic">
        <span class="wsl-item-topic-type-simple">{{ result.srcType }}</span>
      </div>
    </div>
  </div>
</div>
<div [hidden]="hideComplexValue">
  <div [ngSwitch]="meta.rowType">
    <div
      class="wsl-complex-double"
      *ngSwitchCase="rowType.Common_Imperfect_Image">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.dstBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <img
          [src]="getArtifactPath('dst', result.name)"
          [alt]="result.dstValue" />
      </div>
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.srcBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <img
          [src]="getArtifactPath('src', result.name)"
          [alt]="result.srcValue" />
      </div>
    </div>
    <div
      class="wsl-complex-double"
      *ngSwitchCase="rowType.Common_Imperfect_Video">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.dstBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <video [id]="elementId + 'a'" controls muted>
          <source [src]="getArtifactPath('dst', result.name)" />
          {{ result.dstValue }}
        </video>
      </div>
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.srcBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <video [id]="elementId + 'b'" controls muted>
          <source [src]="getArtifactPath('src', result.name)" />
          {{ result.srcValue }}
        </video>
      </div>
    </div>
    <div *ngSwitchCase="rowType.Common_Imperfect_Complex">
      <div class="wsl-complex-single" *ngIf="inlineDiff">
        <div class="wsl-complex-block">
          <div class="wsl-diff-block" [innerHTML]="diffOutput('inline')"></div>
        </div>
      </div>
      <div class="wsl-complex-double" *ngIf="!inlineDiff">
        <div class="wsl-complex-block">
          <div class="wsl-complex-block-head">
            <div></div>
            <div class="wsl-complex-block-desc">
              <span>value in version {{ params.dstBatchName }}</span>
            </div>
            <div class="wsl-complex-block-icons">
              <ng-icon
                class="wsl-complex-block-icon"
                name="heroClipboardDocument"
                title="Copy value to clipboard"
                ngxClipboard
                [cbContent]="result.dstValue"
                (cbOnSuccess)="onCopy($event)" />
            </div>
          </div>
          <div class="wsl-diff-block" [innerHTML]="diffOutput('left')"></div>
        </div>
        <div class="wsl-complex-block">
          <div class="wsl-complex-block-head">
            <div></div>
            <div class="wsl-complex-block-desc">
              <span>value in version {{ params.srcBatchName }}</span>
            </div>
            <div class="wsl-complex-block-icons">
              <ng-icon
                class="wsl-complex-block-icon"
                name="heroClipboardDocument"
                title="Copy value to clipboard"
                ngxClipboard
                [cbContent]="result.srcValue"
                (cbOnSuccess)="onCopy($event)" />
            </div>
          </div>
          <div class="wsl-diff-block" [innerHTML]="diffOutput('right')"></div>
        </div>
      </div>
    </div>
    <div
      class="wsl-complex-single"
      *ngSwitchCase="rowType.Common_Perfect_Video">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in both versions</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <video [id]="elementId" controls muted>
          <source [src]="getArtifactPath('src', result.name)" />
          {{ result.srcValue }}
        </video>
      </div>
    </div>
    <div
      class="wsl-complex-single"
      *ngSwitchCase="rowType.Common_Perfect_Image">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in both versions</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <img
          [src]="getArtifactPath('src', result.name)"
          [alt]="result.srcValue" />
      </div>
    </div>
    <div
      class="wsl-complex-single"
      *ngSwitchCase="rowType.Common_Perfect_Complex">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in both versions</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Copy value to clipboard"
              ngxClipboard
              [cbContent]="result.srcValue"
              (cbOnSuccess)="onCopy($event)"
              name="heroClipboardDocument"
              size="1.25rem" />
          </div>
        </div>
        <pre class="whitespace-pre-wrap" *ngIf="result.srcValue">{{
          parseComplexValue(result.srcType, result.srcValue)
        }}</pre>
      </div>
    </div>
    <div
      class="wsl-complex-single space-y-2"
      *ngSwitchCase="rowType.Common_Accepted_Complex">
      <div class="flex justify-center">
        <div class="flex space-x-16">
          <div class="sm:flex sm:justify-center sm:space-x-2">
            <div
              class="flex min-w-[8rem] items-center justify-center rounded-md bg-gray-100 p-2 text-lg font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
              {{ result.srcValue }}
            </div>
            <div class="wsl-text-muted p-2 text-sm">
              <div>Actual value</div>
              <div>
                Version
                <span class="font-medium">{{ params.srcBatchName }}</span>
              </div>
            </div>
          </div>
          <div class="flex justify-center space-x-2">
            <div
              class="flex min-w-[8rem] items-center justify-center rounded-md bg-gray-100 p-2 text-lg font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
              {{ result.dstValue }}
            </div>
            <div class="wsl-text-muted p-2 text-sm">
              <div>Previous value</div>
              <div>
                Version
                <span class="font-medium">
                  {{ params.dstBatchName }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-center pb-8">
        <div
          class="wsl-text-muted p-2 text-sm"
          *ngFor="let desc of result.desc">
          {{ desc }}
        </div>
      </div>
    </div>
    <div
      class="wsl-complex-double"
      *ngSwitchCase="rowType.Common_Different_Complex">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>
              value in version {{ params.dstBatchName }} ({{ result.dstType }})
            </span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              name="heroClipboardDocument"
              title="Copy value to clipboard"
              ngxClipboard
              [cbContent]="result.dstValue"
              (cbOnSuccess)="onCopy($event)" />
          </div>
        </div>
        <pre class="whitespace-pre-wrap" *ngIf="result.dstValue">{{
          parseComplexValue(result.dstType ?? result.srcType, result.dstValue)
        }}</pre>
      </div>
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>
              value in version {{ params.srcBatchName }} ({{ result.srcType }})
            </span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              name="heroClipboardDocument"
              title="Copy value to clipboard"
              ngxClipboard
              [cbContent]="result.srcValue"
              (cbOnSuccess)="onCopy($event)" />
          </div>
        </div>
        <pre class="whitespace-pre-wrap" *ngIf="result.srcValue">{{
          parseComplexValue(result.srcType, result.srcValue)
        }}</pre>
      </div>
    </div>
    <div class="wsl-complex-single" *ngSwitchCase="rowType.Missing_Complex">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.dstBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              name="heroClipboardDocument"
              title="Copy value to clipboard"
              ngxClipboard
              [cbContent]="result.dstValue"
              (cbOnSuccess)="onCopy($event)" />
          </div>
        </div>
        <pre class="whitespace-pre-wrap" *ngIf="result.dstValue">{{
          parseComplexValue(result.dstType ?? result.srcType, result.dstValue)
        }}</pre>
      </div>
    </div>
    <div class="wsl-complex-single" *ngSwitchCase="rowType.Missing_Image">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.dstBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('dst', result.name)" />
          </div>
        </div>
        <img
          [src]="getArtifactPath('dst', result.name)"
          [alt]="result.dstValue" />
      </div>
    </div>
    <div class="wsl-complex-single" *ngSwitchCase="rowType.Missing_Video">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.dstBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('dst', result.name)" />
          </div>
        </div>
        <video [id]="elementId" controls muted>
          <source [src]="getArtifactPath('dst', result.name)" />
          {{ result.dstValue }}
        </video>
      </div>
    </div>
    <div class="wsl-complex-single" *ngSwitchCase="rowType.Fresh_Complex">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.srcBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              name="heroClipboardDocument"
              title="Copy value to clipboard"
              ngxClipboard
              [cbContent]="result.dstValue"
              (cbOnSuccess)="onCopy($event)" />
          </div>
        </div>
        <pre class="whitespace-pre-wrap" *ngIf="result.srcValue">{{
          parseComplexValue(result.srcType, result.srcValue)
        }}</pre>
      </div>
    </div>
    <div class="wsl-complex-single" *ngSwitchCase="rowType.Fresh_Image">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.srcBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <img
          [src]="getArtifactPath('src', result.name)"
          [alt]="result.srcValue" />
      </div>
    </div>
    <div class="wsl-complex-single" *ngSwitchCase="rowType.Fresh_Video">
      <div class="wsl-complex-block">
        <div class="wsl-complex-block-head">
          <div></div>
          <div class="wsl-complex-block-desc">
            <span>value in version {{ params.srcBatchName }}</span>
          </div>
          <div class="wsl-complex-block-icons">
            <ng-icon
              class="wsl-complex-block-icon"
              title="Download"
              name="featherDownloadCloud"
              (click)="downloadArtifact('src', result.name)" />
          </div>
        </div>
        <video [id]="elementId" controls muted>
          <source [src]="getArtifactPath('src', result.name)" />
          {{ result.srcValue }}
        </video>
      </div>
    </div>
  </div>
</div>
